<template>
  <div class="statisticAnalysis">
    <Bmap ref='baseMap'></Bmap>

    <!--信息框-->
    <div class="ssalymessage">
      <div>
        <el-date-picker
          style="width: 100%;"
          @change="trandate"
          v-model="pst"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <div style="margin-top: .3rem;border-bottom: 1px solid #E4E7ED;">
        <div>
          <span class="txt">总计布设相机：{{totalNum}}次</span>
        </div>
        <div>
          <span class="txt">回收相机：{{recovNum}}次</span>
        </div>
        <div>
          <span class="txt">覆盖网络：{{layGridNum}}个</span>
        </div>

      </div>

      <div style="margin-top: .1rem;overflow: hidden">
        <div style="float: left;display: flex;align-items: center;margin: .1rem" v-for="gd in grading">
          <span class="circle" :style="{'background-color': gd.color}"></span>&nbsp;&nbsp;
          <span>{{gd.s}}</span>
        </div>

      </div>
    </div>
    <!--信息框-->
  </div>
</template>
<script>
  import api from '../utils/api'
  import http from '../utils/http'
  import Bmap from './Map'

  export default {
    components: {
      'Bmap': Bmap
    },
    data() {
      return {
        pst: "",
        t1: "",
        grading: [],
        areaId: "",
        recovNum: 0,
        totalNum: 0,
        layGridNum: 0,
        gridMap: null
      }
    },
    mounted() {
      let vm = this;
      setTimeout(function () {
        vm.$refs.baseMap.creationMap();
        vm.getGrids();
      }, 500)
    },
    created() {
      this.areaId = sessionStorage.getItem('areaId');
    },
    methods: {
      begining() {
        let vm = this;
        (async function () {
          let res = await http.get(api.infrared.layCameraCount,
            {
              areaId: vm.areaId,
              timeStr: vm.t1
            }
          )

          let arrs = [];

          for (var k in res.data.gridMap) {
            arrs.push(res.data.gridMap[k])
          }

          var num = Math.max(...arrs);
          var max = num;
          if (max < 6) {
            max = 6;
          }

          if (max % 6 >= parseInt(max / 6)) {
            max = max - (max % 6)
          }
          var f = 0,
            n = parseInt(max / 6),
            x = parseInt(max / 6),
            y = parseInt(max / x),
            arr = [],
            color = [
              "#FDD835",
              "#FFCA28",
              "#FFB300",
              "#FF8F00",
              "#F57C00",
              "#F4511E"
            ];
          for (var i = 0; i < y; i++) {
            if (i == 0) {
              var z = {
                s: f + "-" + (f + n) + "次",
                color: color[i]
              }
              arr.push(z);
            } else {
              var z = {
                s: [(f + n) * i] + "-" + [(f + n) * (i + 1) + "次"],
                color: color[i]
              };
              arr.push(z);

            }
          }
          if (max > 11) {
            var ks = arr[arr.length - 1].s.split("-")[1] + "以上",
              z = {
                s: ks,
                color: "#C51062"
              };
            arr.push(z)
          }

          if (max < 12) {

            z = {
              s: "6次以上",
              color: "#C51062"
            };
            arr.push(z)
          }
          vm.grading = arr;
          vm.recovNum = res.data.recovNum;
          vm.totalNum = res.data.totalNum;
          vm.layGridNum = res.data.layGridNum;
//          vm.layStatistic = res.data;
          //计划布设
          if (res.data.gridMap != "" || res.data.gridMap != null) {
            let obj = res.data.gridMap;
            for (var k in  obj) {
              for (var i = 0; i < arr.length; i++) {
                if (i < arr.length - 1) {
                  let min = parseInt(arr[i].s.split("-")[0]),
                    max = parseInt(arr[i].s.split("-")[1]),
                    sz = parseInt(obj[k]);
                  if (sz >= min && sz <= max) {
                    if (vm.gridMap[k] != undefined) {
                      var color = arr[i].color;
                      var array = [{
                        id: vm.gridMap[k].id,
                        name: vm.gridMap[k].gridNumber + '计划' + obj[k],
                        textColor: "#a78839",
                        borderColor: "#ffffff",
                        fillColor: color,
                        data: {},
                        geojson: vm.gridMap[k].geojson
                      }];
                      vm.$refs.baseMap.previewshape(array, vm.gridMap[k].id);
                    }

                  }
                }
                if (i == arr.length - 1) {
                  var max = parseInt(arr[i].s);
                  var maxz = obj[k];
                  if (maxz > max) {
                    if (vm.gridMap[k] != undefined) {
                      var array = [{
                        id: vm.gridMap[k].id,
                        name: vm.gridMap[k].gridNumber + '计划' + obj[k],
                        textColor: "#a78839",
                        borderColor: "#ffffff",
                        fillColor: '#C51062',
                        data: {},
                        geojson: vm.gridMap[k].geojson
                      }];
                      vm.$refs.baseMap.previewshape(array, vm.gridMap[k].id);
                    }

                  }
                }
              }
            }
          }
        })()
      },
      //获取网格
      getGrids() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.grids, {
            areaId: vm.areaId,
            level: "1KM"
          })
          var grids = [], gridMap = {};
          res.data.forEach(t => {
            var z = {
              id: t.gridNumber,
              name: t.gridNumber,
              textColor: "#a78839",
              borderColor: "#ffffff",
              fillColor: "rgba(0,0,0,0.1)",
              data: {},
              geojson: t.geojson
            }

            gridMap[t.gridNumber] = t;

            grids.push(z);
          })
          vm.gridMap = gridMap;
//          vm.allGrids = res.data;
          if (grids.length != 0) {
            vm.$refs.baseMap.previewshape(grids, "grids");
          }
          vm.begining();
        })()
      },
      trandate(daterange) {
        if (this.pst != null) {
          var year = daterange[0].getFullYear();
          var month = daterange[0].getMonth() + 1;
          var date = daterange[0].getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (date >= 0 && date <= 9) {
            date = "0" + date;
          }
          var t1 = year + "-" + month + "-" + date;
          var years = daterange[1].getFullYear();
          var months = daterange[1].getMonth() + 1;
          var dates = daterange[1].getDate();
          if (months >= 1 && months <= 9) {
            months = "0" + months;
          }
          if (dates >= 0 && dates <= 9) {
            dates = "0" + dates;
          }
          var t2 = years + "-" + months + "-" + dates;
          this.t1 = t1 + "~" + t2
        } else {
          this.t1 = "";
        }

        for (var k in this.gridMap) {
          this.$refs.baseMap.dellayer(this.gridMap[k].id);
        }

        this.begining();
      },
    }
  }
</script>
<style scoped>
  @import "../../static/css/statisticAnalysis.css";
</style>
